<div class="main">
    <div class="form-group form-inline">
        <span class="control-label col-sm-2">名称：</span>
        <input type="text" class="form-control" [(ngModel)]="template.name" placeholder="卡券模板名称">
    </div>
    <div class="form-group form-inline">
        <span class="control-label col-sm-2">有效期：</span>
        <nz-date-picker
            nzShowTime
            nzFormat="yyyy-MM-dd HH:mm:ss"
            [(ngModel)]="template.enableTime"
            nzPlaceHolder="开始时间">
        </nz-date-picker>
        <nz-date-picker
            nzShowTime
            nzFormat="yyyy-MM-dd HH:mm:ss"
            [(ngModel)]="template.deadlineTime"
            nzPlaceHolder="结束时间">
        </nz-date-picker>    
        <div class="col-sm-offset-2 warning">卡券可在开始日期0点至结束日期24点间兑换</div>
    </div>
    <div class="form-group form-inline">
        <span class="control-label col-sm-2">商品sn：</span>
        <input type="text" style="width:300px;" class="form-control" [(ngModel)]="template.goodsSn" placeholder="商品sn">
        <button class="action-btn" (click)="searchSn()">查询商品Sn</button>
    </div>
    <div class="form-group form-inline">
        <span class="control-label col-sm-2">商品名：</span>
        <input type="text" disabled style="width:300px;" class="form-control" [(ngModel)]="template.goodsName" placeholder="商品名">
    </div>
    <div class="form-group">
        <span class="control-label col-sm-2">配送范围：</span>
        <div *ngFor="let row of shippings; let i = index">
            <div class="checkbox col-sm-offset-2" *ngIf="row.checked">
                <label>
                    <input type="checkbox" value="{{row.code}}" (click)="selectShipping(row.code)" checked>{{row.name}}
                </label>
            </div>
            <div class="checkbox col-sm-offset-2" *ngIf="!row.checked">
                <label>
                    <input type="checkbox" value="{{row.code}}" (click)="selectShipping(row.code)">{{row.name}}
                </label>
            </div>
        </div>
        <div class="col-sm-offset-2 warning">选择我厨直配，兑换时超出我厨配送范围的地址不能下单。<br />选择全国配，请选择支持省市，兑换时属于未配置省市的地址不能下单</div>
        <div class="col-sm-offset-2" *ngIf="isShowRegion">
            <div class="form-group form-inline">
                <span>选择省市：</span>
                <select class="form-control" [(ngModel)]="region.province" (change)="changeProvince()">
                    <option value="">请选择省</option>
                    <option value="{{option.id}}" *ngFor="let option of provinces">{{option.name}}</option>
                </select>
                <select class="form-control" [(ngModel)]="region.city" (change)="changeCity()">
                    <option value="">请选择市</option>
                    <option value="{{option.id}}" *ngFor="let option of cities">{{option.name}}</option>
                </select>
                <button class="action-btn" disabled *ngIf="isDisabledAdd">添加</button>
                <button class="action-btn" (click)="addRegion()" *ngIf="!isDisabledAdd">添加</button>
            </div>
            <div class="form-group form-inline">
                <span>已选省市：</span>
                <div class="row col-sm-offset-2" *ngFor="let region of regions">
                    <div class="col-sm-3">{{region.province}}</div>
                    <div class="col-sm-3">{{region.city}}</div>
                    <div class="col-sm-3"><button class="action-btn" (click)="deleteRegion(region.id)">删除</button></div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button type="submit" class="confirm-btn" (click)="saveAdd()">保存</button>
        </div>
    </div>
</div>


<!--查询商品信息列表弹窗  -->
<div class="row" bsModal #SearchGoodsSn="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title pull-left">查询商品信息列表</h4>
                <button type="button" class="close pull-right" (click)="SearchGoodsSn.hide()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <br>
                <div class="SearchGoodsSn">
                    <div class="grid-header">
                        <div class="grid-title" *ngFor="let column of columns">{{column.title}}</div>
                    </div>
                    <div class="grid-container">
                        <div class="grid-item" *ngFor="let row of rows">
                            <div class="grid-itemInfo">{{row.goodsSn}}</div>
                            <div class="grid-itemInfo">{{row.goodsName}}</div>
                            <div class="grid-itemInfo">
                                <button class="action-btn" (click)="selectGoods(row)">选择</button>
                            </div>
                        </div>
                    </div>
                    <pagination *ngIf="rows" class="pagination-sm" [(ngModel)]="page" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage"
                        [maxSize]="maxSize" [boundaryLinks]="true" [rotate]="false" [firstText]="localText.firstBtn" [lastText]="localText.lastBtn"
                        [previousText]="localText.previousBtn" [nextText]="localText.nextBtn" (pageChanged)="onChangeTable($event)"
                        (numPages)="numPages = $event">
                    </pagination>
                    <pre *ngIf="rows" class="card card-block card-header">页数: {{page}} / {{numPages}}</pre>
                </div>
            </div>
        </div>
    </div>
</div>
<br>